<template>
  <div>
    <el-row>
      <el-col :span="16">
        <ve-line :data="cpuData" height="400px" :grid="memoryGrid"
                 :settings="cpuSetting" :data-empty="dataEmpty"></ve-line>

        <ve-line :data="memoryData" height="400px" :grid="memoryGrid"
                 :settings="memorySetting" :data-empty="dataEmpty"></ve-line>
      </el-col>

      <el-col :span="7" :offset="1">
        <div class="date">
          {{show_time.year}}-{{show_time.month}}-{{show_time.day}}
          <br>
          {{show_time.hour}}:{{show_time.minute}} {{show_time.week}}
        </div>

        <div class="grid">
          <div class="item">
            <div class="item-top blue">用户总数</div>
            <div class="item-number blue">312</div>
          </div>
          <div class="item">
            <div class="item-top blue">新增总数</div>
            <div class="item-number blue">16</div>
          </div>
          <div class="item">
            <div class="item-top blue">Oauth总次数</div>
            <div class="item-number blue">1312</div>
          </div>
          <div class="item">
            <div class="item-top blue">Oauth成功次数</div>
            <div class="item-number blue">312</div>
          </div>
          <div class="item">
            <div class="item-top blue">新增博文</div>
            <div class="item-number blue">312</div>
          </div>
          <div class="item">
            <div class="item-top blue">新增帖子</div>
            <div class="item-number blue">312</div>
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import DataUtil from '@/util/DateUtil'

  export default {
    name: "MonitorCenter",
    data() {
      this.memorySetting = {
        max: [100, 100, 100]
      };
      this.cpuSetting = {
        max: [100],
        area: true
      }
      this.memoryGrid = {
        show: true,
        backgroundColor: '#fff'
      };
      return {
        dataEmpty: false,
        show_time: {
          year: '', month: '', day: '', hour: '', minute: '', week: ''
        },
        memoryData: {
          columns: ['日期', '内存占用', 'JVM占用'],
          rows: [
            {'日期': '1/1', '内存占用': 70, 'JVM占用': 60},
            {'日期': '1/2', '内存占用': 75, 'JVM占用': 70},
            {'日期': '1/3', '内存占用': 74, 'JVM占用': 76},
            {'日期': '1/4', '内存占用': 71, 'JVM占用': 49},
            {'日期': '1/5', '内存占用': 63, 'JVM占用': 32},
            {'日期': '1/6', '内存占用': 50, 'JVM占用': 78}
          ]
        },
        cpuData: {
          columns: ['日期', 'CPU占用'],
          rows: [
            {'日期': '1/1', 'CPU占用': 90},
            {'日期': '1/2', 'CPU占用': 25},
            {'日期': '1/3', 'CPU占用': 14},
            {'日期': '1/4', 'CPU占用': 71},
            {'日期': '1/5', 'CPU占用': 36},
            {'日期': '1/7', 'CPU占用': 51},
            {'日期': '1/8', 'CPU占用': 75},
            {'日期': '1/9', 'CPU占用': 80},
            {'日期': '1/10', 'CPU占用': 30}
          ]
        }
      }
    },
    mounted() {
      setInterval(() => {
        this.date()
      }, 1000)
    },
    methods: {
      date() {
        let date = new Date();
        const week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']
        this.show_time.year = date.getFullYear();
        this.show_time.month = DataUtil.addZero(date.getMonth() + 1);
        this.show_time.day = DataUtil.addZero(date.getDate());
        this.show_time.hour = DataUtil.addZero(date.getHours());
        this.show_time.minute = DataUtil.addZero(date.getMinutes());
        this.show_time.week = week[date.getDay()]
      }
    }
  }
</script>

<style scoped>
  .date {
    width: 100%;
    height: 200px;
    background-color: #363d71;
    color: #fff;
    font-family: ds-digit;
    font-size: 80px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    line-height: 100px;
  }

  .grid {
    width: 100%;
    height: 530px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
  }

  .item {
    height: 150px;
    background-color: white;
  }

  .item-top {
    width: 100%;
    height: 90px;
    font-weight: bold;
    font-size: 28px;
    line-height: 90px;
    text-align: center;
  }

  .item-number {
    width: 100%;
    height: 60px;
    font-weight: bold;
    font-size: 64px;
    line-height: 60px;
    text-align: center;
    font-family: ds-digit;
  }
</style>
